<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>初识Ajax开发</title>
		<script type="text/javascript">
			window.onload = function() {
				var btn = document.getElementById('btn');
				btn.onclick = function() {
					var uname = document.getElementById('username').value;
					var pw = document.getElementById('password').value;

					// 1、创建XMLHttpRequest对象
					var xhr = null;
					if(window.XMLHttpRequest) {
						xhr = new XMLHttpRequest(); //标准
					} else {
						xhr = new ActiveXObject("Microsoft"); //IE6
					}
					// 2、准备发送
					/*
					参数一：请求方式（get获取数据；post提交数据）
					参数二：请求地址
					参数三：同步或者异步标志位，默认是true表示异步，false表示同步
            
					post请求参数通过send传递，不需要通过encodeURI()转码
					必须设置请求头信息
					*/
					var param = 'username=' + uname + '&password=' + pw;
					xhr.open('post', '04post.php', false);
					// 3、执行发送动作
					xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
					xhr.send(param); //post请求参数在这里传递，并且不需要转码
					// 4、指定回调函数
					xhr.onreadystatechange = function() {
						if(xhr.readyState == 4) {
							if(xhr.status == 200) {
								alert(xhr.responseText);
							}
						}
					}

				}
			}
		</script>
	</head>

	<body>
		<form>
			用户名：
			<input type="text" name="username" id="username"><span id="info"></span>
			<br> 密码：
			<input type="text" name="password" id="password">
			<input type="button" value="登录" id="btn">
		</form>
	</body>

</html>